<script setup lang="ts">
import type { UserInfo } from "@/types/admin/user"
import { useUserStore } from "@/store/modules/user"
import { ref, computed } from "vue"
import { ElMessage } from "element-plus"
import { updateUserInfoAPI } from "@/api/admin/user"
import { useRouter } from "vue-router"
import ImageUpload from "@/components/ImageUpload/index.vue"

// 全局路有对象
const router = useRouter()

// 用户仓库对象
const userStore = useUserStore()

// 用户信息
const userInfo = ref<UserInfo>(Object.assign({}, userStore.userInfo))

// 用户头像文件
const avatarFile = ref<File | null>(null)

// 初始头像 URL
const initialAvatarUrl = computed(() => userInfo.value.avatar || "")

// 上传图片
const handleAvatar = (file: File | File[]) => {
  if (file instanceof File) {
    avatarFile.value = file
    userInfo.value.file = file
  }
}

// 提交更新
const submitUpdate = async () => {
  // 表单校验
  formRef.value.validate(async (valid: boolean) => {
    if (valid) {
      const formData = new FormData()
      for (const key in userInfo.value) {
        //@ts-ignore
        formData.append(key, userInfo.value[key])
      }
      const res = await updateUserInfoAPI(formData)
      if (res.code === 200) {
        ElMessage.success("更新成功")
        userStore.setUserInfo()
        cancelUpdate()
      }
    }
  })
}

// 取消
const cancelUpdate = () => {
  // 清除头像信息
  avatarFile.value = null
  // 清除用户信息
  userInfo.value = Object.assign({}, userStore.userInfo)
  // 清除表单校验
  formRef.value.resetFields()
  // 跳转到首页
  router.back()
}

// 校验规则
const rules: any = {
  username: [
    { required: true, message: "请输入用户名称", trigger: "blur" },
    { min: 2, max: 10, message: "长度在 2 到 10 个字符", trigger: "blur" }
  ],
  password: [
    { required: true, message: "请输入用户密码", trigger: "blur" },
    { min: 6, max: 18, message: "长度在 6 到 18 个字符", trigger: "blur" }
  ],
  email: [
    { required: true, message: "请输入用户邮箱", trigger: "blur" },
    { type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }
  ],
  nickname: [{ required: true, message: "请输入用户昵称", trigger: "blur" }],
  gender: [{ required: true, message: "请选择用户性别", trigger: "blur" }],
  avatar: [{ required: true, message: "请上传用户头像", trigger: "blur" }],
  phone: [
    { required: true, message: "请输入用户手机号", trigger: "blur" },
    { min: 11, max: 11, message: "请输入正确的手机号", trigger: "blur" }
  ]
}
// 表单对象
const formRef = ref<any>()
</script>

<template>
  <el-card shadow="never" :body-style="{ padding: '20px' }" class="user-info-card">
    <el-form ref="formRef" :model="userInfo" :rules="rules" style="max-width: 60%; margin: 0 auto" topwidth="160px">
      <el-form-item label="用户名称" prop="username">
        <el-input v-model="userInfo.username" clearable />
      </el-form-item>
      <el-form-item label="用户密码" prop="password">
        <el-input v-model="userInfo.password" type="password" clearable show-password />
      </el-form-item>
      <el-form-item label="用户昵称" prop="nickname">
        <el-input v-model="userInfo.nickname" clearable />
      </el-form-item>
      <el-form-item label="用户性别" prop="gender">
        <el-radio-group v-model="userInfo.gender" style="display: flex; align-items: center">
          <el-radio :value="1" style="display: flex; align-items: center">
            <SvgIcon name="boy" style="width: 30px; height: 30px" />
          </el-radio>
          <el-radio :value="2" style="display: flex; align-items: center">
            <SvgIcon name="girl" style="width: 30px; height: 30px" />
          </el-radio>
          <el-radio :value="0" style="display: flex; align-items: center"> 未知性别 </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="用户邮箱" prop="email">
        <el-input v-model="userInfo.email" clearable />
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="userInfo.phone" clearable />
      </el-form-item>
      <el-form-item label="用户头像" prop="avatar">
        <ImageUpload
          v-model="avatarFile"
          upload-class="large-avatar"
          :initial-url="initialAvatarUrl"
          :max-size="2"
          @change="handleAvatar"
        />
      </el-form-item>
      <el-form-item label="用户简介">
        <el-input v-model="userInfo.introduction" type="textarea" />
      </el-form-item>

      <el-form-item label="GihHub 访问地址">
        <el-input v-model="userInfo.github" clearable />
      </el-form-item>
      <el-form-item label="Gitee 访问地址">
        <el-input v-model="userInfo.gitee" clearable />
      </el-form-item>
      <el-form-item label="CSDN 访问地址">
        <el-input v-model="userInfo.csdn" clearable />
      </el-form-item>
      <el-form-item>
        <div style="margin: 0 auto">
          <el-button size="large" type="primary" @click="submitUpdate">保存</el-button>
          <el-button size="large" type="default" @click="cancelUpdate">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style scoped lang="scss">
// 设置 card 高度铺满到底部
.user-info-card {
  height: calc(100vh - var(--v3-header-height) - 60px);
  overflow: hidden;

  :deep(.el-card__body) {
    height: 100%;
    overflow-y: auto;
    padding: 20px;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
}
.img {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
  border-color: var(--el-color-primary);
}
</style>
